<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .container {
        position: relative;
        width: 1081px;
        height: 608px;
    }
    .controls {
        position: absolute;
        bottom: 0;
        right: 0;
        left: 0;
        height: 88px;
        background-color: rgba(255,255,255,.5);
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .play,  .pause{
        position: relative;
        width: 80px;
        height: 80px;
    }
    .play::after {
        content: '';
        position: absolute;
        justify-content: center;
        align-items: center;
        width: 0;
        height: 0;
        /*transparent透明*/
        border-top: 30px solid  transparent;
        border-bottom: 30px solid  transparent;
        border-right: 30px solid  transparent;
        border-left: 30px solid  white;
        top: 5px;
        left: 0px;
    }
    .pause::after {
        position: absolute;
        content:'||';
        font-size: 20px;
        font-weight: bold;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 1px solid white;
        top: 25px;
        left: 0px;
        color: white;
        vertical-align: middle;
        text-align: center;
        line-height: 40px;
    }
    .timeline {
        position: absolute;
        top: -20px;
        left: 0;
        right: 0;
        height: 10px;
        border-radius: 10px;
        background-color: #cccccc;
    }
    .currentTimeLine {
        position: absolute;
        top: -20px;
        left: 0;
        right: 0;
        height: 10px;
        border-radius: 10px;
        background-color: #3395cc;
        width: 0;
    }
    .fullScreen {
        width: 50px;
        height: 50px;
        border-top: 10px dot-dot-dash black;
        border-bottom:10px dot-dash black ;
        border-left:10px dot-dot-dash black ;
        border-right: 10px dot-dot-dash black;
    }
</style>
<body>
<div class="container">
    <video ><!--video  source插入视频-->
        <source src="../你的名字.mp4"><!--controls控件-->
    </video>
    <div class="controls">
        <div class="timeline"></div>
        <div class="currentTimeLine"></div>
        <div class="play" id="btn"></div>
        <div class="time">
            <span class="currentMin">00</span>
            :
            <span class="currentSec">00</span>
            &nbsp;/&nbsp;
            <span class="min">00</span>
            :
            <span class="sec">00</span>
        </div>
        <div class="fullScreen">全屏</div>
    </div>
</div>
</body>
<script>
    let video,btn,minEL,secEL,curMinEL,cueSecEl,total,currentTimeLine,timeline ,fullScreen;
    video = document.querySelector('video');
    btn = document.querySelector('#btn');
    minEL = document.querySelector('.min');
    secEL = document.querySelector('.sec');
    curMinEL = document.querySelector('.currentMin');
    cueSecEl = document.querySelector('.currentSec');
    currentTimeLine = document.querySelector('.currentTimeLine');
    timeline = document.querySelector('.timeline');
    fullScreen = document.querySelector('.fullScreen');
    btn.addEventListener('click',handleBtn);
    function handleBtn() {
        if(video.paused){
            video.play();
            btn.className = "pause"
        }else{
            video.pause();
            btn.className = "play"
        }
    }
    video.onloadedmetadata = function () {
        //获取视频时长duration
        total = video.duration;
        let min = Math.floor(video.duration/60);
        min = min > 9 ? min:'0'+ min;
        minEL.textContent = min;
        let sec = Math.round(video.duration-min*60);
        sec = sec > 9 ? sec:'0'+ sec;
        secEL.textContent = sec
    };
    function handleTimeUpdate(e){
        let curMin = Math.floor(video.currentTime/60);
        curMin = curMin > 9 ? curMin:'0'+ curMin;
        let curSec = Math.round(video.currentTime-curMin*60);
        curSec = curSec > 9 ? curSec:'0'+ curSec;

        curMinEL.textContent = curMin;
        cueSecEl.textContent = curSec;

        let per = (video.currentTime / total) * 100;
        currentTimeLine.style.width = `${per}%`

    }
    //进度更新timeupdate
    video.addEventListener('timeupdate',handleTimeUpdate);

    timeline.addEventListener('click',function (e) {
        let per = e.offsetX/1081;
        currentTimeLine.style.width = `${per * 100}%`;
        let curTime = total*per;
        let curMin = Math.floor(curTime/60);
        curMin = curMin>9?curMin:'0'+curMin;
        let  curSec = Math.round(curTime-curMin*60);
        curSec= curSec>9?curSec:'0'+curSec;
        curMinEL.textContent = curMin;
        curSecEL.textContent = curSec;
        video.currentTime = curTime
    });
    fullScreen.addEventListener('click',function (e) {
        video.requestFullscreen()
    })
</script>
</html>